<template>
	<view>
		<view v-if="loading">
			<loading></loading>
		</view>
		<view v-else class="container">
			<view class="detail-top" v-if="detail">
				<view class="letf">
					<span>用时：{{detail.duration}}</span>
					<span>成绩：{{detail.score}}分（满分{{detail.totalScore}}分）</span>
					<span>答对：{{detail.correctNumber}}道题</span>
					<span>答错：{{detail.inCorrectNumber}}道题</span>
					<span>结果：{{detail.score >= detail.passScore ? '合格':'不合格'}}</span>
				</view>
				<view class="right">
					<image src="/static/images/Shelf.png" mode=""></image>
				</view>
			</view>
			<view class="detail-body" v-if="list">
				<!-- <uni-title type="h3" title="答题详情"></uni-title> -->
				<view class="subject-item"  v-for="(item,index) in list" :key="index" >
					<view class="title-view"><text class="quesType">{{item.subject.choicesType == 0 ? '单选':item.subject.choicesType == 3 ? '多选' : item.subject.choicesType == 2 ? '判断' :''}}</text><text class="question">{{resHtml(item.subject.subjectName)}}</text></view>
					<view class="answer-list" v-if="item.subject.choicesType == 3">
						<checkbox-group >
							<view class="answer-desc"  v-for="(item2,index2) in item.subject.options" :key="index2">
								<checkbox :value="item2.optionName"  color="#FF9A50;" disabled :checked="item2.isChecked" :class="item2.isAnswer?'xuanzhong':''"></checkbox>
								<text>{{item2.optionName}}:{{resHtml(item2.optionContent)}}</text>
							</view>
						</checkbox-group>
					</view>
					<view class="answer-list" v-else>
						<radio-group >
							<view class="answer-desc"  v-for="(item2,index2) in item.subject.options" :key="index2">
								<radio :value="item2.optionName"  color="#FF9A50;" disabled :checked="item2.optionName === item.subject.answer.answer" :class="item2.optionName == item.answer?'daan':''"></radio>
								<text>{{item2.optionName}}:{{resHtml(item2.optionContent)}}</text>
							</view>
						</radio-group>
					</view>
					<view class="answer-view">
						<view>
							答案 
							<text class="true">{{item.subject.answer.answer}}</text> 
							您选择 
							<text v-if="item.answer == item.subject.answer.answer" class="true">{{item.answer}} 回答正确</text>
							<text v-else  class=" true false">{{item.answer}} 回答错误</text>
						</view>
					</view>
					<view class="analysis" v-if="item.subject.analysis">
						<text class="quesType">答案解析</text>
						<text class="jiexi"> {{resHtml(item.subject.analysis)}}</text>
					</view>
				</view>

			</view>

		</view>
		</view>
</template>

<script>
		import loading from '@/components/loading/loading'
		import {getExamDetail} from '@/api/exam/exam'
	export default {
		data() {
			return {
				list:[],
				id:null,
				detail:null,
				loading:true
			}
		},
		created() {
			this.getList()
		},
		onLoad(e) {
			this.id = e.id
		},
		onBackPress(event){
			history.go(-1)
		},
		methods: {
			checked(index) {
				this.isActive = index
			},
			getList(){
				getExamDetail(this.id).then(res => {
					this.detail = res.data
					//this.list = res.data.answers
					let item = {}
					for (let i = 0; i < this.detail.answers.length; i++) {
						//判断多选题是否选中
						if( this.detail.answers[i].subject.choicesType == 3){
							let answer = this.detail.answers[i].subject.answer.answer
							if(answer != null && answer != ''){
								for (let t = 0; t <  this.detail.answers[i].subject.options.length; t++) {
									this.detail.answers[i].subject.options[t].isChecked = answer.indexOf(this.detail.answers[i].subject.options[t].optionName)!= -1?true:false
									this.detail.answers[i].subject.options[t].isAnswer = this.detail.answers[i].answer.indexOf(this.detail.answers[i].subject.options[t].optionName) != -1?true:false
								}
								this.detail.answers[i].answer = this.detail.answers[i].answer.replace(new RegExp(",","g"),"")
							}
							this.detail.answers[i].subject.answer.answer = this.detail.answers[i].subject.answer.answer.replace(new RegExp(",","g"),"")
						}
						this.list.push({subject:this.detail.answers[i].subject,answer:this.detail.answers[i].answer})
					}
					this.loading = false
				}).catch(() =>{
					
				})
			},
			resHtml(item){
				return item.replace(/<[^>]+>/g, '')// 去掉所有的html标记
			},
		}
	}
</script>

<style lang="scss">
	.container{
		width: calc(100vw - 60rpx);
		margin: 30rpx auto;
		.detail-top{
			background: #FF9A50;
			box-shadow: 0px 2px 34px 5px rgba(156,193,220,0.25);
			border-radius: 10px 10px 10px 10px;
			opacity: 1;
			height: 350rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-family: Inter-Bold, Inter;
			font-weight: bold;
			span{
				display: block;
				color: #FFFFFF;
				padding:10rpx 30rpx;
			}
			.right image{
				width: 160rpx;
				height: 210rpx;
			}
		}
		.detail-body{
			
			.subject-item{
				margin-top: 30rpx;
				background: #FFFFFF;
				box-shadow: 0px 2px 34px 5px rgba(156,193,220,0.25);
				border-radius: 10px 10px 10px 10px;
				opacity: 1;
				padding: 50rpx;
				.question{
					display: inline-block;
					font-size: 28rpx;
					font-weight: bold;
					font-family: Inter-Bold, Inter;
					line-height: 20px;
				}
			}
			.title-view{
				display: flex;
			}
			.quesType{
				display: inline-block;
				color: #fff;
				padding: 3px 5px;
				background: #FF9A50;
				border-radius:4px;
				margin-right: 10px;
				font-size: 10px;
				font-family: Inter-Medium, Inter;
				font-weight: 500;
				height: 16px;
				min-width: 24px;
			}
			.answer-list{
				padding-left:40px ;
				margin-bottom: 20rpx;
				.answer-desc{
					text{
						line-height: 100rpx;
						padding-left: 10rpx;
					}
					
				}
			}
			.answer-view{
				background: #FFEBDC;
				border-radius: 10rpx;
				font-size: 28rpx;
				font-family: Inter-Regular, Inter;
				font-weight: 400;
				color: #000;
				padding: 20rpx 30rpx;
				.true{
					padding: 0rpx 16rpx;
					color: #508CFF;
				}
				.false{
					color: #F26D6D;
				}
			}
			.analysis{
				margin: 50rpx;
			}
			/deep/ .daan .uni-radio-input:before{
				//font: normal normal normal 14px/1 uni;
				content: "×";
				color: #fff;
				font-size: 24px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-48%) scale(.85);
				-webkit-transform: translate(-50%,-48%) scale(.85);
			}
			/deep/ .daan .uni-radio-input{
				background-color: #F26D6D;
				border: #F26D6D 2px solid;
			}
			/deep/ .xuanzhong .uni-checkbox-input{
				background-color: #F26D6D;
				border: #F26D6D 2px solid;
			}
			/deep/ .xuanzhong .uni-checkbox-input:before{
				content: "×";
				color: #fff;
				font-size: 18px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-48%) scale(.85);
				-webkit-transform: translate(-50%,-48%) scale(.85);
			}
			/deep/ .uni-radio-input{
				width: 32rpx;
				height: 32rpx;
				border: #FF9A50 2px solid;
			}
			
			/deep/ .uni-radio-input-checked{
				background-color: #508CFF !important;
				border-color:  #508CFF !important;
			}
			/deep/ .uni-checkbox-input{
				width: 32rpx;
				height: 32rpx;
				border: #FF9A50 2px solid;
			}
			/deep/ .uni-checkbox-input-checked{
				background-color: #508CFF !important;
				border-color:  #508CFF !important;
			}
			/deep/ .uni-checkbox-input-checked{
				background-color: #508CFF !important;
				border-color:  #508CFF !important;
			}
			/deep/ .uni-radio-input-checked:before{
				content: "\EA08" !important;
				font-size: 18px !important;
				transform: translate(-50%,-48%) scale(.73) !important;
				-webkit-transform: translate(-50%,-48%) scale(.73) !important;
			}
			/deep/ .uni-checkbox-input-checked:before{
				content: "\EA08" !important;
				font-size: 18px !important;
				transform: translate(-50%,-48%) scale(.73) !important;
				-webkit-transform: translate(-50%,-48%) scale(.73) !important;
			}
			/deep/ .uni-checkbox-input-disabled{
				background-color: #fff;
			}
		}
		
	}

</style>